@import '~scss/variables';
@import '~scss/mixins';

.alert {
  display: flex;
  padding: 12px;
  border-radius: 4px;

  @at-root {
    .icon {
      flex-shrink: 0;
    }
  }

  &.info {
    background-color: #c7deef;

    .message {
      color: #3385b0;
    }
  }

  &.error {
    background-color: #fae7e5;

    .message {
      color: #8c3231;
    }
  }

  &.warning {
    background-color: $yellow-color01;
    
    .message {
      color: $yellow-color05;
    }
  }

  &.default {
    background-color: $light-color01;
    
    .message {
      color: $dark-color07;
    }
  }
}

.message {
  margin-left: 5px;
  @include TypographyParagraph();  

  h3 {
    font-weight: 600;
  }
}
